import { useIntersectionObserver } from '@vueuse/core'

// 添加日期范围
export const addDateRange = function (params, dateRange, propName) {
	try {
		let search = clone(params)
		const str = typeof dateRange === 'string'
		let startTime, endTime
		;[startTime = '', endTime = ''] = str ? search[dateRange] : dateRange
		if (typeof propName === 'undefined') {
			search['startTime'] = startTime
			search['endTime'] = endTime
		} else {
			search['start' + propName] = startTime
			search['end' + propName] = endTime
		}
		if (str) delete search[dateRange]
		return search
	} catch (error) {
		console.log(error)
	}
}

// 成功提示
export const msgSuccess = function (message) {
	ElMessage({ showClose: true, message, type: 'success' })
}

// 失败提示
export const msgError = function (message) {
	ElMessage({ showClose: true, message, type: 'error' })
}

// 警告提示
export const msgWarning = function (message) {
	ElMessage({ showClose: true, message, type: 'warning' })
}

// 信息提示
export const msgInfo = function (msg) {
	ElMessage(msg)
}

// 提交确认
export const confirm = function (data) {
	let options = {}
	if (typeof data === 'string') {
		options.item = data
	} else {
		options = { ...data }
	}

	let { item = '是否确认导出所有数据项？', title = '提示', confirmButtonText = '确定', cancelButtonText = '取消', type = 'warning' } = options
	return new Promise((resolve, reject) => {
		ElMessageBox.confirm(item, title, {
			showCancelButton: false,
			confirmButtonText,
			cancelButtonText,
			draggable: true,
			type
		})
			.then((res) => {
				resolve(res)
			})
			.catch((err) => {
				reject(err)
			})
	})
}

/**
 * 封装一个通用的方法实现数据的懒加载
 * @param {DOM} target表示组件的最外层div元素
 * @returns
 */
export const useLazyData = function (target, callBack) {
	// 监听组件是否进入可视区
	const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
		// 如果target对应的DOM进入可视区，那么该回调函数就触发
		if (isIntersecting) {
			// 被监听的DOM进入了可视区:此时调用接口获取数据；停止继续监听
			stop()
			// 回调函数
			if (callBack) callBack()
		}
	})
}

// echarts图表基本配置
export const Epitions = {
	grid: {
		top: 10,
		left: 10,
		right: 10,
		bottom: 10,
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'line'
		},
		backgroundColor: 'rgba(3, 15, 39, 0.8)',
		borderColor: 'rgba(76, 107, 209, 0.5)',
		extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
		textStyle: {
			color: 'rgba(255, 255, 255, 1)'
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: true,
		axisPointer: {
			handle: {
				show: false
			}
		},
		axisLine: {
			show: true,
			symbol: ['none', 'none'],
			symbolSize: [6, 12],
			lineStyle: {
				width: 2,
				color: '#747B88'
			}
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			fontSize: 12,
			color: '#fff',
			interval: 'auto'
		}
	},
	yAxis: {
		type: 'value',
		axisLabel: {
			fontSize: 12,
			color: '#fff',
			interval: 'auto'
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: 'rgba(224,230,241,0.2)',
				type: 'dashed'
			}
		},
		axisTick: {
			show: false
		}
	}
}

// echarts图表legend
export const Elegend = {
	orient: 'horizontal',
	top: 0,
	right: 0,
	itemWidth: 20,
	itemHeight: 8,
	icon: 'circle',
	itemGap: 17,
	align: 'left',
	textStyle: {
		color: '#fff',
		fontSize: 14,
		fontFamily: 'AlibabaPuHuiTi-Medium'
	}
}

export function EpitionsFn(obj) {
	return merge({}, Epitions, obj)
}

// 自动导入的方法
export const autoImportList = ['msgSuccess', 'msgError', 'msgInfo', 'msgWarning', 'confirm', 'addDateRange', 'Epitions', 'Elegend', 'EpitionsFn']
export const lodashList = ['add', 'sum', 'clone', 'cloneDeep', 'merge', 'isArray', 'isDate', 'isElement', 'isFunction', 'isString', 'isObject']
